<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D立方体展示器</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: linear-gradient(135deg, #1e3c72, #2a5298);
            font-family: Arial, sans-serif;
        }
        
        #container {
            width: 100vw;
            height: 100vh;
            position: relative;
        }
        
        #info {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            text-align: center;
            font-size: 14px;
            z-index: 100;
            background: rgba(0, 0, 0, 0.3);
            padding: 10px 20px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="info">
            拖拽鼠标旋转立方体 | 双击重置视角
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r158/three.min.js"></script>
    <script>
        // 场景、相机、渲染器
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x000000, 0);
        document.getElementById('container').appendChild(renderer.domElement);

        // 创建立方体
        const geometry = new THREE.BoxGeometry(2, 2, 2);
        
        // 为每个面创建不同的材质
        const materials = [
            new THREE.MeshBasicMaterial({ color: 0xff0000 }), // 红色
            new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // 绿色
            new THREE.MeshBasicMaterial({ color: 0x0000ff }), // 蓝色
            new THREE.MeshBasicMaterial({ color: 0xffff00 }), // 黄色
            new THREE.MeshBasicMaterial({ color: 0xff00ff }), // 品红
            new THREE.MeshBasicMaterial({ color: 0x00ffff })  // 青色
        ];
        
        const cube = new THREE.Mesh(geometry, materials);
        scene.add(cube);

        // 设置相机位置
        camera.position.z = 5;

        // 初始旋转角度
        const initialRotation = { x: 0.5, y: 0.5, z: 0 };
        cube.rotation.x = initialRotation.x;
        cube.rotation.y = initialRotation.y;

        // 鼠标交互变量
        let isDragging = false;
        let previousMousePosition = { x: 0, y: 0 };
        let rotationSpeed = { x: 0, y: 0 };

        // 鼠标事件监听
        renderer.domElement.addEventListener('mousedown', (e) => {
            isDragging = true;
            previousMousePosition = { x: e.clientX, y: e.clientY };
        });

        renderer.domElement.addEventListener('mousemove', (e) => {
            if (!isDragging) return;
            
            const deltaMove = {
                x: e.clientX - previousMousePosition.x,
                y: e.clientY - previousMousePosition.y
            };
            
            rotationSpeed.x = deltaMove.y * 0.01;
            rotationSpeed.y = deltaMove.x * 0.01;
            
            cube.rotation.x += rotationSpeed.x;
            cube.rotation.y += rotationSpeed.y;
            
            previousMousePosition = { x: e.clientX, y: e.clientY };
        });

        renderer.domElement.addEventListener('mouseup', () => {
            isDragging = false;
        });

        renderer.domElement.addEventListener('mouseleave', () => {
            isDragging = false;
        });

        // 双击重置
        renderer.domElement.addEventListener('dblclick', () => {
            cube.rotation.x = initialRotation.x;
            cube.rotation.y = initialRotation.y;
            cube.rotation.z = initialRotation.z;
        });

        // 触摸事件支持
        renderer.domElement.addEventListener('touchstart', (e) => {
            isDragging = true;
            const touch = e.touches[0];
            previousMousePosition = { x: touch.clientX, y: touch.clientY };
        });

        renderer.domElement.addEventListener('touchmove', (e) => {
            if (!isDragging) return;
            e.preventDefault();
            
            const touch = e.touches[0];
            const deltaMove = {
                x: touch.clientX - previousMousePosition.x,
                y: touch.clientY - previousMousePosition.y
            };
            
            rotationSpeed.x = deltaMove.y * 0.01;
            rotationSpeed.y = deltaMove.x * 0.01;
            
            cube.rotation.x += rotationSpeed.x;
            cube.rotation.y += rotationSpeed.y;
            
            previousMousePosition = { x: touch.clientX, y: touch.clientY };
        });

        renderer.domElement.addEventListener('touchend', () => {
            isDragging = false;
        });

        // 窗口大小调整
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            
            // 添加惯性效果
            if (!isDragging) {
                rotationSpeed.x *= 0.95;
                rotationSpeed.y *= 0.95;
                cube.rotation.x += rotationSpeed.x;
                cube.rotation.y += rotationSpeed.y;
            }
            
            renderer.render(scene, camera);
        }

        animate();
    </script>
</body>
</html>
